<template>
  <div style="height:100%;">
    <!-- 上拉图标 -->
    <pull-up></pull-up>
    <div class="mui-content mui-scroll-wrapper mui-slider-group" >
      <!-- 搜索fixe -->
      <div class="search-warp" :class="[{'search-fixe ':search_fixe},{'animated':animated}, {'slideInDown':slideInDown}]" style="display:none;padding: .4rem .5rem .4rem 4.25rem;">
        <div class="qr-code" @tap="handleRouteBarCode">
            <!--二维码-->
            <div class="mui-icon-extra mui-icon-extra-sweep" style="margin-top:1px"></div>
          </div>
          <div class="search-box">
            <span class="mui-icon mui-icon-search"></span>
            <input v-on:focus="handleRouteSearch" type="text" placeholder="请输入车名">
          </div>
          <div class="service">
            <!--客服-->
            <div class="mui-icon-extra icon-33" style="margin-top:1px" @tap="switchBackDrop">
              <span class="customer" v-if="$store.state.appChat.roomData.cust_msg_count"></span>
            </div>
          </div>
          <div class="leaveworld">
            <!--留言-->
            <div @tap="goMsgCenter" class="mui-icon-extra icon-44" style="margin-top:1px" ></div>
              <span class="customer" v-if="$store.state.appMsg.msgStatus"></span>
          </div>
      </div>
      <div class="mui-scroll">
        <!-- 主界面具体展示内容 -->
        <!-- APP应用下载 -->
        <div class="6095 index appPromote" lgoinprompt="prompt" style="display: block; top: 0px;" v-show="app_show">        
          <div class="appPromote_wrapper">
            <div class="j_login_ad_btn_close"  @tap="app_show=false">
            </div>        
            <div class="logo_tieba">
              <img :src="appImgSrc" alt="tieba_log">
            </div>        
            <div class="top_bar_content">            
              打开环球app，随时随地开启逗比模式
            </div>
            <div class="btn-box">
              <span awnis="btn"> 立即打开</span>
            </div>
          </div>
        </div>
        <!-- 搜索 -->
        <div class="search-warp"  v-show="nav_show" style="padding: .4rem .5rem .4rem 4.25rem;" >
          <div class="qr-code" @tap="handleRouteBarCode">
            <!--二维码-->
            <div class="mui-icon-extra mui-icon-extra-sweep" style="margin-top:1px"></div>
            <div style="font-size:12px;position:absolute;top:22px;width:50px;left:-6px;color:#999999;">扫一扫</div>
          </div>
          <div class="search-box" >
            <span class="mui-icon mui-icon-search"></span>
            <input v-on:focus="handleRouteSearch" type="text" placeholder="请输入车名  如奥迪A4L">
          </div>
          <div class="service">
            <!--客服-->
            <div class="mui-icon-extra icon-33" style="margin-top:1px"  @tap="switchBackDrop">
              <span class="customer" v-if="$store.state.appChat.roomData.cust_msg_count"></span>
              <div style="font-size:12px;position:absolute;top:25px;color:#999999;">客服</div>
            </div>
          </div>
          <div class="leaveworld">
            <!--留言-->
            <span  @tap="goMsgCenter" class="mui-icon-extra icon-44" style="margin-top:1px" ></span>
            <span class="customer" style="right:13px;" v-if="$store.state.appMsg.msgStatus"></span>
            <div style="font-size:12px;position:absolute;top:22px;color:#999999;">消息</div>
          </div>
        </div>
        <!--轮播-->
        <swip-public></swip-public>
        <!--选项卡菜单-->
        <filter-menu></filter-menu>
        <!--最新数据-->
        <crossLine></crossLine>
        <latestData></latestData>
        <!-- 首页车型列表 -->
        <box-car-list></box-car-list>
        <!-- 已经拼单用户 -->
        <crossLine></crossLine>
        <lplUser></lplUser>
        <crossLine></crossLine>   
        <!-- <iframe src="http://we.cnupai.cn/wap/index.html#/inquiryPrice"></iframe> -->
        <!-- 页尾 -->
        <div class="footer">
          <ul class="cfix">
            <li @tap="goOftenQuestion()"><a href="#" class="n1"><span>常见问题</span></a></li>
            <li @tap="goAbout()"><a class="n2"><span>关于环球港</span></a></li>
          </ul>
         <!--  <p><em></em>正规4S店车源<em></em>保障真实报价<em></em>举报虚假报价奖励500元</p> -->
          <p style="margin-bottom:0px;">Copyright ©  2018 环球汽车产业发展有限公司</p>
          <p style="margin-bottom:0px;">www.cnupai.com</p>
          <p style="margin-bottom:0px;">version:{{version}}</p>
        </div>
      </div>
    </div>
    <!-- 联系选择弹窗 -->
    <!-- <contactPopover :backdrop="backdrop" @backdrop="handleBackdrop"></contactPopover> -->
    <actionSheet></actionSheet>
    <!-- 下载遮罩 -->
    <dlProcess v-show='downStatus' :downData="downData"></dlProcess>
    <!-- APP红包弹窗 --> 
    <redPacket @handleLink="handleLink"></redPacket>
  </div>
</template>
<script>
  import 'static/js/mui.pullToRefresh.js'
  import 'static/js/mui.pullToRefresh.material.js'
  import mui from 'static/js/mui'
  import axios from 'axios'
  import crossLine from '@/components/base/cross-line/cross-line'
  import lplUser from '@/components/base/lpl-user/lpl-user'
  import latestData from '@/components/base/latest-data/latest-data'
  import filterMenu from '@/components/base/filter/filter-menu'
  import boxCarList from '@/components/base/car-list/box-car-list'
  import swipPublic from '@/components/base/swip-public/swip-public'
  /* import contactPopover from "@/components/base/contact-popover/contact-popover" */
  import actionSheet from '@/components/base/contact-popover/actionsheet'
  import dlProcess from "@/components/base/dl-process/dl-process"
  import pullUp from '@/components/base/pull-up/pull-up'
  import redPacket from '@/components/base/red-packet/red-packet'
  import vIframe from '@/components/base/v-iframe/v-iframe'
  import {addCidToCustomer, addServiceToCustomer} from '@/api/user'
  import { findRedisByCustomerId, delRedisByCustomerId} from '@/api/config'
  import {offLineSendMessage, delSendMessage} from '@/pyApi/message'
  import {saveMessageToM} from '@/nodeApi/other'
  import storage from '@/utils/localstorage'
  import { Toast } from 'mint-ui'
  import io from 'static/js/socket.io'
  import { mapState} from 'vuex'
  export default {
    data() {
      return {
        vIframeStatus: false,
        downStatus: false,
        search_fixe: false,
        app_show: false,
        animated: false,
        slideInDown: false,
        nav_show: true,
        //backdrop: false,
        msgStatus: false,
        appImgSrc: "static/img/logo.png",
        srollHeight:0,
        segmented: 0,
        itme1Active: true,
        itme2Active: false,
        itme3Active: false,
        outLink: '',
        activityName: '',
        version:process.env.APP_VERSION,
        downData:{
          downloadedSize: 0,
          totalSize: 1
        },
        mask: {}
      }
    },
<<<<<<< HEAD
    created() {
     /*  if(window.plus){
        plus.navigator.setStatusBarBackground("#ff6a27")
        plus.navigator.setStatusBarStyle('white')
      } */
      // 获取广告路由参数
      this.getParams() 
      // 如果没有跳转过则跳转去看
      /* this.goAd() */
      // 开启用户行为监听
      setInterval(this.listenUserAction, 300000)
      // 保存cid
      this.saveCid()
    },
    mounted() {    
      //注意闭包的问题
      let that = this
      
      mui.init({
      keyEventBind: {
        backbutton: true  //关闭back按键监听
          }
      });
      // h5+返回
      // 首次绑定物理键，后期使用window全局变量管理window.physicsBackRouter
			// utils.h5Plus.bindPhysicsBack(null)
      // 首页返回键处理
      // 处理逻辑：1秒内，连续两次按返回键，则退出应用；
      var first = null;
      mui.back = function() {
          //首次按键，提示‘再按一次退出应用’
          if (!first) {
              first = new Date().getTime();//记录第一次按下回退键的时间
              mui.toast('再按一次退出应用');//给出提示
              // history.go(-1)//回退到上一页面
              setTimeout(function() {//1s中后清除
                  first = null;
              }, 1000);
          } else {
              if (new Date().getTime() - first < 1000) {//如果两次按下的时间小于1s，
                  plus.runtime.quit();//那么就退出app
      } } };

      /* document.addEventListener('plusready', function () {
        plus.push.createMessage("测试消息", "LocalMSG", {cover:false});
      }, false) */
      //获得slider插件对象
      var gallery = mui('.mui-slider');
      gallery.slider({
        interval: 5000 //自动轮播周期，若为0则不自动播放，默认为0；
      });
      //竖向滚动
      let scroll = mui('.mui-scroll-wrapper').scroll({
        scrollY: true, //是否竖向滚动
        scrollX: false, //是否横向滚动
        startX: 0, //初始化时滚动至x
        startY: 0, //初始化时滚动至y
        indicators: false, //是否显示滚动条
        deceleration: 0.0006, //阻尼系数,系数越小滑动越灵敏
        bounce: false //是否启用回弹
      });
      window.addEventListener('scroll',  
        this.handleNavSwitch,false
      );
      //是否是app应用
      if(!window.plus){
        this.app_show = true
      }
      document.addEventListener( "plusready", function(){ 
        //console.log('进来了')
        // 扩展API加载完毕，现在可以正常调用扩展API 
        // 添加监听从系统消息中心点击某条消息启动应用事件 
        plus.push.addEventListener( "receive", function ( msg ) { 

          that.msgStatus = true
            //mui.alert(msg.content,"消息提示", ['确定'],function() {},'div')
        }, false );  
        plus.push.addEventListener( "click", function ( msg ) { 
          thah.msgStatus = true
            //mui.alert(msg.content, "消息提示", ['确定'],function() {},'div'); 
        }, false );  
      }, false );
      //开启客服聊天室监听
      let roomId = ''
      let type = storage.getLocalstorage('user').serviceId
      let mobile = storage.getLocalstorage('user').mobile
      let user_id = storage.getLocalstorage('user').id
      if(user_id){ //如果有user_id继续逻辑
        if(type){
          roomId = mobile + type
        }else{
          if(type == null){
            type = (Math.random() + 1).toFixed(0)
          }
          let data = {serviceId: type, mobile: mobile}
          addServiceToCustomer(data).then(res=>{
            storage.setLocalstorage('user', res.data)
            roomId = mobile + type
          }).catch(res=>{
              console.log(res)
            })
        }
      }
      // 通知消息
			// 拉取离线通知消息
			if(typeof window.msgCount  == 'undefined'){
				offLineSendMessage({user_id: '0C'+ user_id }).then(res=>{
					if(res.data.length !== 0){
            window.msgCount = 1
            saveMessageToM(res.data).then(res=>{
              console.log('保存离线消息')
=======
    created () {},
    mounted () {
      mui.init()
      var that = this;
      (function ($) {
        //阻尼系数
        var deceleration = mui.os.ios ? 0.003 : 0.0009
        $('.mui-scroll-wrapper').scroll({
          bounce: false,
          indicators: false, //是否显示滚动条
          deceleration: deceleration
        })
        $.ready(function (callback) {
          //循环初始化所有下拉刷新，上拉加载。
          $.each(document.querySelectorAll('.mui-slider-group .mui-scroll'), function (index, pullRefreshEl) {
            $(pullRefreshEl).pullToRefresh({
              down: {
                callback: function () {
                  var self = this
                  
                }
              },
              up: {
                height: 50, //可选.默认50.触发上拉加载拖动距离
                auto: false, //可选,默认false.自动上拉加载一次
                contentrefresh: '<a class="loadingImages"></a>', //可选，正在加载状态时，上拉加载控件上显示的标题内容
                contentnomore: '已到底了', //可选，请求完毕若没有更多数据时显示的提醒内容；
                callback: function () {
                  var self = this
                  that.tabUp(index, self)
                }
              }
>>>>>>> dd41e2f3bf85f73ad56b3061e10ea83e67b8f848
            })
						this.$store.dispatch('handleUpdateMsgStatus', true)
					}else{
						this.$store.dispatch('handleUpdateMsgStatus', false)
					}
				})
			}
      if(typeof window.socketState === 'undefined'){
        window.socketState = true
        //创建连接
        window.socket = io.connect(process.env.CHAT_API+'/ChatRoom');
        //监听房间状态的消息
        window.socket.on('my_request',function(data){
          if(data.data != ''){
            let roomData = data.data.msg;
            for(let i=0;i<data.data.msg.length;i++){
              if(data.data.msg[i]['room_id'] ==roomId){
                  roomData = data.data.msg[i];
                  that.$store.dispatch('handleUpdateRoomData', roomData)
              }			
            }
          }
        });
        // 通知消息
				// 创建连接，先获取房间号。
				window.messageSocket = io.connect(process.env.CHAT_API+'/0C'+user_id, {'force new connection': true});
				//监听回复的消息
				window.messageSocket.on('bindMsg',function(data){
          saveMessageToM({'target':'0C', 'messages':[data]}).then(res=>{
            console.log('保存离线消息')
          })
					that.$store.dispatch('handleUpdateMsgStatus', true)
				})
      }
      // 通知消息
      // 拉取离线通知消息
      if(typeof window.msgCount  == 'undefined') {
        offLineSendMessage({user_id: '0C'+user_id }).then(res=>{
          window.msgCount = 1
          let count= res.data.length
          if(count !== 0){
            
          }
        })
      }

      // var w = plus.webview.create('http://www.baidu.com');
      // w.show(); // 显示窗口
    },
    //注意销毁掉监听，不然报错
    destroyed () { 
      window.removeEventListener('scroll',  
        this.handleNavSwitch,false
      ) 
    },
    computed: {
        ...mapState([
          'appChat',
        ])
    },
    components: {crossLine,lplUser,filterMenu,boxCarList, swipPublic, pullUp, actionSheet, dlProcess,latestData, redPacket, vIframe},
    methods: {
      handleLink(value){
        this.$router.push({
          name: 'vIframe',
          params:{
            current: value
          }
        })
      },
<<<<<<< HEAD
      //版本检测
      checkVersion(){
        let that = this
        let foreignVesion = storage.getLocalstorage('globalConfig')[8]
        /* 悲观处理未获取到版本号的问题 */
        if(typeof foreignVesion == 'undefined'){
          return
        }
        //如果是ios则跳提示去商店升级
				if(mui.os.ios){
					if(process.env.APP_VERSION != foreignVesion){
						Toast('app有新版本发布!请前往市场升级软件,不然会影响使用')
					}
        }
        //app版本管理,PC测试取反
        if(mui.os.android){
          //进行ajax请求获得当前最新版本，如果不同则下载
          if(process.env.APP_VERSION != foreignVesion){
            //console.log(process.env.APP_VERSION)
            //console.log(foreignVesion)
            //触发下载逻辑
            mui.confirm('有'+foreignVesion+'版本发布了，是否更新？','开星选车app',['取消','确认'],function(e){
              let upr=(e.index==1)?'Y':'N';
              try{
                if(upr=='Y'){
                    //var wt=plus.nativeUI.showWaiting('下载更新中，请勿关闭');
                    /* plus.nativeUI.alert( "下载更新中，请勿关闭!", function(){
                      plus.runtime.quit();
                    }); */
                    //按经理要求改成进度条
                    setTimeout(function () {
                      that.downStatus = true
                    }, 1000)
                    var url= 'http://www.cnupai.com/downloadapp/kxxc'+foreignVesion+'.apk';//下载地址
                    var dtask=plus.downloader.createDownload(url,{},function(d,status){
                          if(status==200){
                              var path=d.filename;
                              plus.runtime.install(path);
                          }else{//下载失败
                              alert('Download failed:'+status);
                          }
                      });
                      dtask.start();
                      dtask.addEventListener( "statechanged", function(task,status){
                        //console.log(task.state)
                        if(!dtask){return;}
                          switch(task.state){
                            case 1: // 开始
                              //console.log("开始下载..." );
                            break;
                            case 2: // 已连接到服务器
                              //console.log("链接到服务器..." );
                            break;
                            case 3:	// 已接收到数据
                              //console.log("下载数据更新:" );
                              that.downData.downloadedSize =  task.downloadedSize
                              that.downData.totalSize =  task.totalSize
                              //console.log( task.downloadedSize+"/"+task.totalSize);
                            break;
                            case 4:	// 下载完成
                              //console.log("下载完成！" );
                              //console.log(task.totalSize );
                            break;
                          }
                      });
                }else{
                  plus.runtime.quit();
                }
              }catch(e){
                Toast('下载出错')
              }
            },'div');
          }else {
            //console.log('最新');
=======
      tabUp (index, self) {
        alert(1)
        //上拉加载更多数据这里是模拟ajax请求，请求完后赋值contentData就可以了
        console.log('下拉获取子项：' + index + '获取对象：' + self)
        var data = [{
          name: '加载内容1'
        },
          {
            name: '加载内容2'
>>>>>>> dd41e2f3bf85f73ad56b3061e10ea83e67b8f848
          }
        }
      },
      listenUserAction(){
        let user = storage.getLocalstorage('user')
        if(user){
          let data = {'customerId': storage.getLocalstorage('user').id};
          findRedisByCustomerId(data).then(res=>{
            if(res.data != ''){
              //console.log(res)
              //var cust = storage.getLocalstorage('user').id
              let backdata = {'customerId': storage.getLocalstorage('user').id}
              let newData = []
              for(let i=0;i<res.data.length;i++){
                newData.push(res.data[i][0])
              }
              backdata['value']= newData
              delRedisByCustomerId(backdata).then( resp=>{
                  let userActionData = storage.getLocalstorage('userAction')
                  if(userActionData){
                      storage.setLocalstorage('userAction',userActionData.concat(res.data))
                      //mui.alert('您有新的系统消息,点击右上角查看')
                      this.msgStatus = true
                  }else{
                    storage.setLocalstorage('userAction',res.data)
                  }
                }
              ).catch(res=>{
                console.log(res)
              })
            }
          }).catch(res=>{
            console.log(res)
          })
        }
      },
      goAbout() {
        this.$router.push('/about/')
      },
      goOftenQuestion(){
        this.$router.push('/oftenQuestion/')
      },
      goMsgCenter() {
        this.$router.push('msgCenter')
      },
      /* goAd() {
        if(!this.$store.state.appData.adHas) {
          this.$router.push({
            path: "/ad"})
        }else{
          //mui.alert('此为测试版，月底将清空数据！','提示')
        }
        return 
      }, */
      getParams() {
        //获取路由参数'
        let routeVal = this.$route.params
        if(JSON.stringify(routeVal)!=="{}"){
          if(typeof(routeVal.adHas) !== 'undefined'){
            this.$store.commit('AD_HAS',routeVal.adHas)
            //获取数据后在版本检测
            console.log('是否跳过广告:'+this.$store.state.appData.adHas)
            if(this.$store.state.appData.adHas){
              this.checkVersion()
            }
          }
        }/* else{
          if(!this.$store.state.appData.adHas){
            this.$router.push({
            path: "/ad"})
          }
        } */
      },
      saveCid() {
        ////console.log(plus.push.getClientInfo().clientid)
        try{
          if(storage.getLocalstorage('user')){
            let user = {'customerId':storage.getLocalstorage('user').id,'cid':plus.push.getClientInfo().clientid}
            addCidToCustomer(user).then(res=>{
            }).catch(res=>{
            console.log(res)
          })
          }
        }catch(e){
          //console.log('h5无法保存cid')
        }
      },
      handleRouteBarCode() {
        this.$router.push({
          path: "/barCode",
        })
      },
      /* 从子组件接收参数，监听为子组件方法名 */
      handleBackdrop(data) {
        this.backdrop = data;
      },
      switchBackDrop() {
        //this.backdrop = !this.backdrop;
        mui('#sheet1').popover('toggle');
      },
      handleNavSwitch() {
        try{
          this.srollHeight = scroll.y
          this.segmented = -(document.getElementById('segmentedControl').offsetTop)
          if(this.srollHeight <= this.segmented){
            this.nav_show = true
            this.search_fixe = true
            this.animated = true
            this.slideInDown = true
          }
          else if( this.srollHeight > this.segmented){
            this.search_fixe = false
            this.animated = false
            this.slideInDown = false
          }
        }
        catch(err){
             //console.log('改变窗口会触发此错误，需要优化')
        }
      },
      handleRouteSearch() {
        this.$router.push({
          path: "/search",
        })
      },
      sendPrice(price) {
        //传输价格给filter页面,path会导致不能传参
        this.$router.push({
          name: "filter",
          params: {
            price: price,
          }
        })
      },
      sendBrand(brand) {
        this.$router.push({
          name: "filter",
          params: {
            brand: brand,
          }
        })
      },
      sendCarTypes(carType) {
        this.$router.push({
          name: "filter",
          params: {
            carType: carType,
          }
        })
      },
      goTo() {
        //这边如果是/brand则无过渡，/brand/则有过渡效果，参考router/index.js
        this.$router.push({
          path: "/brand/"
        });
      }
    }
  }

</script>

<style scoped>
  @import '~static/common/common.css';

  .mui-content,
  body,
  html {
    height: 100% !important
  }
  div { 
    margin:0;padding:0;
  }
  a {
      text-decoration: none;
      color: #3d3d3d;
  }

  /* 搜索 */
  .animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
  }

  .slideInDown {
    -webkit-animation-name: slideInDown;
    animation-name: slideInDown; 
  }
  @keyframes slideInDown
  {
    from {top:-48px;}
    to {top:0px;}
  }

/* 搜索 */
.search-warp {
	background: #fff !important;
}
.search-warp.search-fixe {
	position: fixed;
	top: 0;
  background: #fff !important;
  border-bottom: 1px solid #ddd;
	z-index: 9;
	display:block!important;
}
  .mui-icon-search {
    position: absolute;
    top:5px;
    left:-22px!important;
    font-size: 20px;
    z-index:999;
  }

  .search-warp {
    position: relative;
    left: 0;
    right: 0;
    top:0px;
    padding: .4rem .5rem .4rem 5.25rem;
    z-index: 10;
    margin: 0px !important;
  }
  .mui-text-right{
    position:absolute;
    bottom:4px;
    right:5px;
  }
  /**客服 */
  .service{
    position: absolute;
    right:30px;
    top: .25rem;
    width: 40px;
    height: 32px;
    color: #333;
  }
  .leaveworld{
    position: absolute;
    right:-5px;
    top: .25rem;
    width: 40px;
    /* height: 32px; */
    color: #333;
  }
  /* 二维码 */
  .qr-code {
    position: absolute;
    left:12px;
    top: .25rem;
    width: 40px;
    height: 32px;
    color: #333;
  }
  .saoyisao {
    position: relative;
    font-size: .4rem;
    text-align: center;
    height: 20px;
    top: -5px;
    left: -8px;
  }
  .city {
    position: absolute;
    left: .5rem;
    top: .4rem;
    padding: 0 1.35rem 0 .55rem;
    line-height: 1.6rem;
    background-color: #fff;
    border-radius: 1rem;
  }

  .city:after {
    content: '';
    position: absolute;
    right: .5rem;
    top: .7rem;
    width: .6rem;
    height: .4rem;
    background: url(https://cxstatic.img16888.com/dist/images/mobile/index-bg-v1.png) no-repeat -2.95rem -1.5rem;
    background-size: 3.55rem 6.1rem;
  }

  .search-box {
    position: relative;
  }
  .mui-icon-search[data-v-7b63ac08] {
      position: absolute;
      top: 5px;
      left:-22px;
      z-index:55;
  }
  .search-box input {
    position:relative;
    left:-30px;
    width:85%;
    padding: .1rem .4rem .1rem 1.6rem;
    font-size: .6rem;
    background-color: #f5f5f5;
    border: none;
    border-radius: 1rem;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0px !important;
    height: 32px !important;
  }

  /* 首页车型列表 */
  .carlist {
    padding-bottom: 0rem;
  }

  .panle {
    position: relative;
  }

  .panle:before {
    content: "";
    background-color: #e5e5e5;
    height: 1px;
    position: absolute;
    left: 0;
    right: 0;
    -webkit-transform: scaleY(.5);
    transform: scaleY(.5);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    top: 0;
  }

  .panle h4 {
    font-size: .7rem;
    font-weight: 400;
    padding: .6rem .5rem;
    background-color: #fff;
    margin-bottom:0px!important;
    border-bottom: #e2e2e2 1px solid;
  }

  .panle h4 a.more {
    float: right;
    position: relative;
    padding-right: .5rem;
  }

  .cfix:after {
    content: ".";
    clear: both;
    height: 0;
    visibility: hidden;
    display: block;
  }

  .carlist li {
    width: 50%;
    float: left;
    text-align: center;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    border-bottom: #e2e2e2 1px solid;
    border-right: #e2e2e2 1px solid;
  }

  .carlist a {
    -webkit-tap-highlight-color: rgba(245,245,245,.3);
  }

  .carlist a div.box {
    margin: 0 auto;
    position: relative;
    background-color: #fff;
    text-align: center;
  }

  .carlist a div.box .pic {
    overflow: hidden;
  }

  .carlist a div.box .pic img {
    width: 98%;
    margin: -5% auto 3%;
    padding-bottom: 3%;
  }

  .carlist a div.box .top {
    position: absolute;
    top: .15rem;
    left: .15rem;
    text-align: center;
  }

  .carlist a .top.top-ico {
    width: 2.1rem;
    height: 1.4rem;
    background: url(https://cxstatic.img16888.com/dist/images/mobile/index-bg-v1.png) no-repeat;
    background-size: 3.55rem 6.1rem;
  }

  .carlist a div.box .bottom {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 1rem;
    line-height: 1.1rem;
    width: 100%;
    text-align: left;
    font-size: .6rem;
    color: #1a1a1a;
  }
  
  .carlist a div.box .bottom span.price {
    position: absolute;
    right: .25rem;
  }

  .carlist a div.box .bottom span em {
    font-size: .7rem;
    color: #ff3034;
  }

  .carlist a div.box .bottom span.num {
    padding-left: .25rem;
  }

  .carlist a div.box .top em {
    display: block;
    padding: .35rem .15rem .2rem;
    width: 1.8rem;
    height: 1.8rem;
    color: #fff;
    font-size: .4rem!important;
    line-height: 1.2em;
    background-color: #ff3034;
    border-radius: 100%;
  }

  .carlist a div.text {
    text-align: center;
    padding: .25rem 0 0;
    font-size: .7rem;
    position: absolute;
    top:9px;
    right: .25rem;
  }

  /* 页尾 */
  .footer {
    padding: 1.2rem 2% 3.5rem;
    text-align: center;
    color: #8b8b8b;
    background-color: #fff;
  }

  .footer ul {
    padding-bottom: .75rem;
  }

  .footer li {
    float: left;
    width: 50%;
  }

  .footer li a {
    display: block;
    line-height: 1.6rem;
    text-align: center;
    margin: 0 .2rem;
    font-size: .65rem;
    border-radius: .2rem;
    border: 1px solid #e5e5e5;
  }

  /* .footer li a:before {
    content: '';
    display: inline-block;
    width: .6rem;
    height: .7rem;
    margin-right: .25rem;
    vertical-align: middle;
    background: url(https://cxstatic.img16888.com/dist/images/mobile/footer.png) no-repeat;
    background-size: 1.7rem 3rem;
  } */

  .footer li a.n1:before {
    background-position: 0 -2.1rem;
  }

  .footer li a.n2:before {
    background-position: -.85rem -2.1rem;
  }

  /* app下载 */
  .appPromote {
    top: 45px;
    left: 0;
    z-index: 10001;
    font-family: Microsoft YaHei;
    color: #fff;
    font-size: 16px;
    width: 100%;
    background-color: #fff;
  }

  .appPromote_wrapper {
    display: -ms-flexbox;
    display: flex;
    display: -webkit-flex;
    height: 60px;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    overflow: hidden;
    background: rgba(0,0,0,.7);
    width: 100%;
    padding-right: 15px;
    box-sizing: border-box;
  }

  .j_login_ad_btn_close {
    width: 40px;
    height: 40px;
    line-height: 40px;
    background: url('img/icon_close.png');
    background-size: 15px 15px;
    background-repeat: no-repeat;
    background-position: center center;
  }
  
  .logo_tieba {
    width: 50px;
    height: 60px;
    padding: 10px;
    padding-left: 0;
  }
  
  .item_image img, .logo_tieba img {
    width: 100%;
    height: 100%;
    border-radius: 5px;
  }

  .top_bar_content {
    font-size: 14px;
    padding: 0 8px;
    box-sizing: border-box;
    height: 37px;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    -ms-flex: 1;
    flex: 1;
    display: -webkit-box;
    line-height: 18px;
  }

  .btn-box {
    max-width: 80px;
  }

  .btn-box span {
    position: relative;
    min-width: 55px;
    max-width: 80px;
    box-sizing: border-box;
    padding: 0 5px;
    height: 30px;
    display: inline-block;
    background-color: #ff6a27;
    border-radius: 2px;
    opacity: 1;
    text-align: center;
    line-height: 30px;
    overflow: hidden;
  }
  /* 客服 */
  .customer {
    position: absolute;
    width:8px;
    height:8px;
    background: #ff6a27;
    border-radius:4px;
    top:1px;
    margin-left: -7px;
    font-size: 10px;
  }
</style>
